<template>
  <div>
    <van-popup
      round
      v-model:show="zjdgPayInfo.dialogShow"
      position="center"
      safe-area-inset-bottom
    >
      <div class="rounded-[10px] p-[10px]">
        <div class="text-center">对公支付</div>
        <div class="flex items-center mt-[10px]">
          <div class="w-[90px]">收款账号：</div>
          <div>{{ zjdgPayInfo.bank_cardno }}</div>
        </div>
        <div class="flex items-center mt-[10px]">
          <div class="w-[90px]">收款户名：</div>
          <div>{{ zjdgPayInfo.bank_account_name }}</div>
        </div>
        <div class="flex items-center mt-[10px]">
          <div class="w-[90px]">开户行：</div>
          <div>{{ zjdgPayInfo.bank_name }}</div>
        </div>
        <div class="flex items-center mt-[10px]">
          <div class="w-[90px]">付款凭证：</div>
          <van-uploader v-model="fileList" :after-read="successFile" @delete="del" />

          <!-- <van-uploader v-model="fileList" multiple :after-read="successFile">
              <div class="w-[118px]">
                <van-button color="#EF6800" plain block style="height: 30px"
                  >上传文件</van-button
                >
              </div>
            </van-uploader> -->
        </div>
        <div class="flex items-center mt-[20px] w-full justify-center">
          <van-button
            color="#EF6800"
            @click="submit"
            plain
            block
            style="height: 30px; width: 100px"
            >提交</van-button
          >
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import { ref, defineProps, inject, reactive } from "vue";
import OSS from "ali-oss";
import { corpFile } from "@/utils/api";
import { showToast } from "vant";
import { useRouter, useRoute } from "vue-router";
const props = defineProps({
  zjdgPayInfo: {} as any,
});
const router = useRouter();
const route = useRoute();
const fileList = ref([]) as any;

const global = inject<any>("global");
const getUrl = () => {
  fileList.value = [];
  if (props.zjdgPayInfo.bank_file) {
    let p = {
      url: props.zjdgPayInfo.bank_file,
    };
    fileList.value.push(p);
  }
};
getUrl();
//上传成功
const successFile = (file: object, _: object) => {
  httpRequest(file);
};
//上传照片
const httpRequest = (v: any) => {
  //index 0是营业执照，1是身份证正面 2是反面

  let e = v.file;

  let client = new OSS({
    region: global.region,
    //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS。
    accessKeyId: global.accessKeyId,
    accessKeySecret: global.accessKeySecret,
    bucket: global.bucket,
  });
  //获取当前时间

  let filename = e["name"];

  let res_file = e;

  async function put() {
    try {
      //object-name可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
      await client
        .multipartUpload(filename, res_file, {
          progress: () => {
            // console.log("上传进度：" + progre);
            //console.log(percentage); // 上传文件进度
          },
        })
        .then(async () => {})
        .catch((_: any) => {
          showToast("上传失败");
          //return that.toast(0, "上传失败");
        });
    } catch (e) {}
  }

  put();
};
//提交
const submit = async () => {
  console.log(fileList.value);

  if (fileList.value.length <= 0) {
    showToast("请上传凭证");
    return;
  }

  // let str = Date.parse(new Date().toString());
  // console.log(str);

  let p = {
    id: route.query.order_id,
    bank_file: props.zjdgPayInfo.bank_file
      ? props.zjdgPayInfo.bank_file
      : global.oss_url + fileList.value[0].file.name,
  };
  // props.zjdgPayInfo.bank_file = global.oss_url + fileList.value[0].file.name;
  // let param = {
  //   pay_img: global.oss_url + fileList.value[0].file.name,
  //   id: props.zjdgPayInfo.id,
  // };
  const res = await corpFile(p);
  if (res.code == 1) {
    setTimeout(() => {
      router.replace("/h5/mine/payOrder?type=2");
    }, 500);
  }
  showToast(res.msg);
};
//删除
const del = () => {
  props.zjdgPayInfo.bank_file = "";
};
</script>
<style scoped lang="scss"></style>
